$tdBg: #f2f2f2;
$mainColor: #409EFF;
$mainColor30: mix(#fff, $mainColor, $weight: 30%);
$mainColor50: mix(#fff, $mainColor, $weight: 50%);
$mainColor70: mix(#fff, $mainColor, $weight: 70%);
$mainColorDark: mix(#000, $mainColor, $weight: 20%);


/*** 1. l-panel(模块) START ***/
.l-panel {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .1);

    .panel-head {
        position: relative;
        height: 76px;
        padding: 8px 15px;
        color: #333;
        line-height: 28px;
        // border-bottom: 1px solid #efefef;
        box-shadow: 0 1px 1px 0 #efefef;

        .title {
            letter-spacing: 1px;
            font-size: 16px;
            font-weight: 700;
        }

        .handle-tool {
            position: absolute;
            top: 8px;
            right: 15px;
            margin: 0 -5px;

            .item {
                display: inline-block;
                margin: 0 5px;
                color: #666;
                font-size: 14px;
                cursor: default;
            }

            .item-btn {
                min-width: 90px;
                padding: 0 10px;
                margin: 0 5px;
                height: 28px;
                font-size: 12px;
                letter-spacing: 1px;
                line-height: 26px;
                border-radius: 4px;
            }

            .item-icon {
                display: inline-block;
                width: 32px;
                height: 32px;
                font-size: 14px;
                text-align: center;
                line-height: 32px;
                cursor: default;

                &:hover {
                    color: $mainColor;
                    text-shadow: 0 0 1px $mainColor;
                }
            }

            .is-fold {
                // 折叠
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }
        }
    }

    .panel-body {
        position: relative;
        padding: 10px 15px;
        font-size: 14px;
        line-height: 24px;
    }
}

/*** 1. l-panel(模块) END ***/

/*** 2. l-form(表单) START ***/
.l-form {
    padding-top: 22px;

    .el-select {
        width: 100%;
    }

    .u-text-left.el-input-number {
        .el-input__inner {
            text-align: left;
        }
    }

    .s-fullsize {
        width: 100%;
    }

    /* 验证码 */
    .vertify-row {
        .inp {
            width: 60%;
        }

        .handle {
            float: right;
            width: 35%;
            height: 40px;
            border-radius: 4px;
            background: rgba(255, 255, 255, .1);

            img,
            .img,
            .el-button {
                width: 100%;
                height: 100%;
            }

            img,
            .img {
                background: no-repeat center;
                background-size: contain;
                cursor: pointer;
            }
        }
    }

    /* 按钮 */
    .btn-group {
        margin-bottom: 0;

        .btn {
            width: 100px;
        }
    }
}

/*** 2. l-form(表单) END ***/


/* 内容底部 */
.section-btn {
    margin: 16px auto 22px;
    text-align: center;
    padding-top: 20px;

    .btn {
        display: inline-block;
        min-width: 140px;
        margin: 0 20px;
    }
}

/*** 7. l-table & l-tabdata(表格相关) START ***/
%tableOpt {
    // 操作项
    display: inline-block;
    color: #504f4f;
    padding: 0 2px;
    margin: 6px 2px;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;

    .icon,
    & > i {
        display: inline-block;
        padding-right: 3px;
        color: #898989;
        font-size: 14px;
        vertical-align: baseline;
    }

    &:hover,
    &:hover .icon,
    &:hover > i {
        color: #000;
        text-shadow: 0 0 3px #cecece;
    }

    &.opt-disabled,
    &.opt-disabled > i {
        color: #999;
        cursor: default;
    }

    &.opt-danger,
    &.opt-danger > i {
        color: #F56C6C;

        &:hover {
            color: #BA3A3A
        }

        &:disabled {
            color: #F79F9F
        }
    }

    &.opt-primary,
    &.opt-primary > i {
        color: $mainColor;

        &:hover {
            color: $mainColorDark
        }

        &:disabled {
            color: $mainColor70
        }
    }
}

%tableOptBtn {
    display: inline-block;
    margin: 3px 3px;
    padding: 5px 12px;
    white-space: nowrap;
}

%tableBtn {
    padding: 0 8px;
    margin: 0 3px;
    height: 22px;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 20px;
    border-radius: 2px;
}

/* el-table 样式 */
.el-table {
    width: 99.9% !important;
}

.l-table {
    margin: 12px auto;

    * {

        &::-webkit-scrollbar-track,
        &::-webkit-scrollbar-thumb {
            border-radius: 0;
            border: 2px solid transparent;
        }

        &::-webkit-scrollbar-track {
            // 外层轨道
            box-shadow: 1px 1px 8px rgba(35, 35, 35, 0.2) inset;
        }

        &::-webkit-scrollbar-thumb {
            // 拖动条
            box-shadow: 0 0 0 8px rgba(35, 35, 35, .2) inset;
        }
    }

    &.no-hover {
        tbody tr:hover > td {
            background-color: #fff !important;
        }
    }

    th.gutter {
        display: table-cell !important;
    }

    td,
    th,
    th.is-leaf {
        padding: 0;
        text-align: center;
        // border-color: #dcdfe6;
    }

    .el-table__header-wrapper,
    .el-table__header,
    .el-table__footer-wrapper,
    .el-table__fixed-footer-wrapper {

        tr,
        th {
            background: $tdBg;
        }

        th,
        th.is-leaf {
            padding: 0;
        }
    }

    .el-table__footer-wrapper tbody td,
    .el-table__fixed-footer-wrapper tbody td {
        .cell {
            background: $tdBg
        }
    }

    .el-table--border th,
    .el-table__fixed-right-patch,
    .el-table__footer-wrapper tbody td,
    .el-table__header-wrapper tbody td {
        background: #f2f2f2
    }

    .el-table__body-wrapper.is-scrolling-right ~ .el-table__fixed-right {
        border-left: 1px solid #EBEEF5;
    }
    .el-table__body-wrapper.is-scrolling-left ~ .el-table__fixed-left {
        border-right: 1px solid #EBEEF5;
    }

    .cell {
        padding: 12px 6px;
        line-height: 1.6;
        word-wrap: break-word;
        word-break: break-all;

        a.c-table-link {
            color: $mainColor;
            text-decoration: underline;
        }
    }

    /* 重点色 */
    .point-blue {
        color: #666;
        background: #d3ebf4 !important;
    }

    .point-yellow {
        color: #666;
        background: #f9f8d2 !important;
    }

    .point-purple {
        color: #666;
        background: #d1d7f2 !important;
    }

    /* 控件宽度 start */
    .s-full {

        &.el-autocomplete,
        &.el-select,
        &.el-cascader,
        &.el-date-editor.el-input,
        &.el-date-editor.el-input__inner,
        &.el-input-number {
            width: 100%;
        }
    }

    &.s-all-full {

        .el-autocomplete,
        .el-select,
        .el-cascader,
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner,
        .el-input-number {
            width: 100%;
        }
    }

    /* 控件宽度 end */
    /* 操作按钮 */
    .opt {
        @extend %tableOpt;
    }

    .opt-btn {
        @extend %tableOptBtn;
    }

    .btn {
        @extend %tableBtn;
    }

    .link {
        color: $mainColor;

        &:hover {
            color: $mainColorDark;
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .link-blue {
        color: #409EFF;

        &:hover {
            color: #1385F7;
            text-decoration: underline;
            cursor: pointer;
        }
    }

    /* 列表异常标记 */
    .cell-error {
        position: absolute;
        top: 0;
        left: 0;
        // z-index: 2;
        width: 100%;
        height: 0;
        text-align: left;

        .img,
        img {
            display: inline-block;
            width: 22px;
            margin-right: 3px;
        }
    }

    /* 列表提示标记 */
    .cell-tips {
        position: absolute;
        top: 5px;
        right: 10px;

        .color-warning {
            color: #E6A23C;
        }

        .color-error {
            color: #F56C6C;
        }
    }

    /* 表格行 */
    .disabled-row {
        color: #999 !important;
        background: #f6f6f6;
    }
}

/* 表格上方操作栏 */
.c-table-handle {
    padding: 4px 0 0;
    margin: 12px auto;

    &:first-child {
        margin-top: 0;
    }

    &:before,
    &:after {
        content: " ";
        display: block;
        height: 1px;
        visibility: hidden;
        clear: both;
    }

    .handles {
        & > * {
            margin: 0 2px;
        }
    }

    .item {
        width: 150px;

        .s-sm {
            width: 100px;
        }

        .s-lg {
            width: 200px
        }
    }

    .item-icon {
        width: 28px;
        height: 28px;
        padding: 0;
        font-size: 12px;
        text-align: center;
        line-height: 26px;
        border-radius: 2px;
        background: rgba(255, 255, 255, .6);

        &:hover {
            color: #999;
            border-color: rgba($mainColor, .5);

            i {
                color: #666
            }
        }
    }

    .item-btn {
        display: inline-block;
        // width: 90px;
        padding: 0 12px;
        margin-left: 10px;
        height: 28px;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 26px;
        border-radius: 4px;
    }

    .item-btn-box {
        display: inline-block;
        margin: 0;
        font-size: 0;

        .item-btn {
            display: block;
            font-size: 12px;
        }
    }
}

/* 筛选栏 */
.c-filter {
    padding: 0 3px;
    margin: 0 -15px;

    .item {
        position: relative;
        width: auto;
        display: inline-block;
        margin: 0 8px;
        padding: 0 6px;
        color: #333;
        font-size: 14px;
        font-weight: 700;
        line-height: 28px;
        cursor: pointer;

        &:hover,
        &.active {
            color: $mainColor;
            text-shadow: 0 0 1px rgba($mainColor, .3);
        }

        & + .item:before {
            content: '|';
            position: absolute;
            top: 0;
            left: -11px;
            color: #e6e6e6;
            font-size: 14px;
            text-shadow: none;
        }
    }
}

/* 表格统计金额展示样式 */
%balance-item {
    // 表格统计数据样式
    display: inline-block;
    margin-right: 12px;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    line-height: 28px;
    vertical-align: middle;

    .num {
        padding-left: 2px;
        color: $mainColor;
        font-size: 18px;
        font-weight: 600;
    }
}

.c-balance-part {
    .balance-item {
        // 父子级关系：.c-balance-part > .balance-item
        @extend %balance-item;
    }

    @at-root {
        .c-balance-item {
            // 可全局引用
            @extend %balance-item;
        }
    }
}

/* 分页 */
.c-table-pager {
    padding: 0 6px 4px;
    margin: 12px auto;
    text-align: right;

    .el-pagination {
        padding: 0;
    }
}

/* 静态数据(表格形式展示) */
.l-tabdata {
    width: 100%;
    color: #333;
    font-size: 14px;
    text-align: center;
    background: #fff;
    table-layout: fixed;

    td,
    th {
        width: 25%;
        // min-height: 36px;
        padding: 6px 12px;
        text-align: center;
        word-wrap: break-word;
        border: 1px solid #e6e6e6;
        overflow: hidden;
    }

    td {
        height: 36px;
    }

    .title-tr,
    .title-td {
        // 标题tr/td样式
        color: #666;
        font-size: 14px;
        font-weight: 600;
        background: $tdBg;
    }

    .accent-bg {
        // 重点展示
        background: #e5e5e5;
    }

    .accent-txt {
        color: $mainColor
    }

    /* 表格操作 */
    .opt {
        @extend %tableOpt;
    }

    .btn {
        @extend %tableBtn;
    }

    /* 控件宽度 start */
    .s-full {

        &.el-autocomplete,
        &.el-select,
        &.el-cascader,
        &.el-date-editor.el-input,
        &.el-date-editor.el-input__inner,
        &.el-input-number {
            width: 100%;
        }
    }

    &.s-all-full {

        .el-autocomplete,
        .el-select,
        .el-cascader,
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner,
        .el-input-number {
            width: 100%;

        }
    }

    /* 控件宽度 end */

    /* 斑马纹 (竖向) */
    &.s-interval,
    .s-interval {
        tr > td:nth-child(2n-1) {
            background: $tdBg
        }

        td,
        th {
            width: auto;
            text-align: left;
            vertical-align: middle;
        }

        .title-td {
            width: 220px;
            text-align: center;
            vertical-align: middle;

            .must {
                display: inline-block;
                padding: 0 4px;
                color: #f00;
                font-size: 12px;
                vertical-align: middle;
            }
        }
    }
}

/*** 7. l-table & l-tabdata(表格相关) END ***/



/* --------- flex style START --------- */
.l-flex {
    @include flex;
}

.l-flex--v {
    @include flex-v;
}

.l-flex-wrap {
    @include flex-wrap;
}

.l-flex-nowrap {
    @include flex-nowrap;
}

.l-flex-shrink {
    @include flex-shrink;
}

.flex-col-center {
    @include flex-col-c;
}

.flex-col-top {
    @include flex-col-t;
}

.flex-col-bottom {
    @include flex-col-b;
}

.flex-row-left {
    @include flex-row-l;
}

.flex-row-center {
    @include flex-row-c;
}

.flex-row-right {
    @include flex-row-r;
}

.flex-row-between {
    @include flex-row-between;
}

.flex-row-around {
    @include flex-row-round;
}

@for $i from 1 to 12 {
    .l-flex-#{$i} {
        -webkit-box-flex: $i;
        -ms-flex: $i;
        flex: $i;
    }
}

.flex-self-start {
    @include flex-self-t;
}
.flex-self-center {
    @include flex-self-c;
}
.flex-self-end {
    @include flex-self-b;
}
/* --------- flex style END --------- */


/* --------- 文本限制 START --------- */
.l-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.l-line-2 {
    -webkit-line-clamp: 2;
}

.l-line-3 {
    -webkit-line-clamp: 3;
}

.l-line-4 {
    -webkit-line-clamp: 4;
}

.l-line-5 {
    -webkit-line-clamp: 5;
}
.l-line-6 {
    -webkit-line-clamp: 6;
}

.l-line-2, .l-line-3, .l-line-4, .l-line-5, .l-line-6 {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; // 弹性伸缩盒
    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

/* --------- 文本限制 END --------- */